<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<input type="submit" name="compose" id="compose" value="compose"/>
</body>


<form method="POST" action="/emails/email_sent/">
  <input type="submit" name="sent_email" id="sent_mail" value="sent mails"/>
</form>

<form method="POST" action="/emails/email_trash/">
  <input type="submit" name="trash" id="trash" value="trash"/>
</form>

<form method="POST" action="/emails/email_draft/">
  <input type="submit" name="draft" id="draft" value="draft"/>
</form>

<div id="table" style="display:none">
<form method="POST" id="detail" action="/emails/email/" enctype="multipart/form-data">
<table border="1">


  FROM:<input type="email" id= "from_email" name="from_email"/>
    <p class="errors" id="from_errors" style="display:none"> This field is required</p>
  TO:<input type="email" id="to_email" name="to_email"/>
    <p class="errors" id="to_errors" style="display:none"> This field is required</p>
  SUBJECT:<input type="text" name="subject"/>
  <p class="errors" id="subject_errors" style="display:none"> This field is required</p>
  MESSAGE:<input type="text" name="message"/>
  <p class="errors" id="message_errors" style="display:none"> This field is required</p>
  FILEUPLOAD:<input type="file" name="files"/>

        <input type="submit" id="email_draft" name="email_draft" value="save draft"/>
        <input type="submit" value="submit"/> 

</table>
</form>
</div>

<script type="text/javascript">
$("#compose").click(function(){
$("#table").show()
});
</script>


<select>
  <option value="archive mail">archive mail</option>
  <option value="email templates">email templates</option>
  <option value="folders">folders</option>
  <option value="filters">filters</option>
  <option value="Group Email Accounts">Group Email Accounts</option>
</select>


<table border="1">
{% for sent in email_sent %}
  <tr>
    <td>TO : {{sent.to_email}}</td>
    <td>{{sent.subject}}</td>
    <td>{{sent.message}}</td>
    <td>{{sent.send_time}}</td>
    <td>{{sent.file}}</td>
    <td><a href='/emails/email_delete/{{sent.id}}/'>delete</td>
    </tr>
{% endfor %}
</table>

<table border="1">
{% for trash in email_trash %}
  <tr>
    <td>TO : {{trash.to_email}}</td>
    <td>{{trash.subject}}</td>
    <td>{{trash.message}}</td>
    <td>{{trash.send_time}}</td>
    <td>{{trash.file}}</td>
    <td><a id="email_trash_delete" href='/emails/email_trash_delete/{{trash.id}}/'>delete</a></td>
    </tr>
{% endfor %}
</table>

<table border="1">
{% for draft in email_draft %}
  <tr>
    <td>TO : {{draft.to_email}}</td>
    <td>{{draft.subject}}</td>
    <td>{{draft.message}}</td>
    <td>{{draft.send_time}}</td>
    <td>{{draft.file}}</td>
    <td><a id="email_draft_delete" href='/emails/email_draft_delete/{{draft.id}}/'>delete</a></td>
    </tr>
{% endfor %}
</table>

<script type="text/javascript">
$("#email_trash_delete").click(function(e){
  val=confirm("are you sure? do you want to delete permanently?")
  if(val == false){
    alert("coming")
      e.preventDefault()
  }
});

$("#detail").submit(function(e){
  from = $("#from_email").val()
  to = $("#to_email").val()
  subject = $("#subject").val()
  message = $("#message").val()
  alert("hhhhh")
  
  if(from == "" && to == "" && subject == "" && message == ""){
    e.preventDefault()
    $(".errors").show()
  }
  if(from == ""){
    e.preventDefault()
    $("#from_errors").show()
  }
  if(to == ""){
    e.preventDefault()
    $("#to_errors").show()
  }
  if(subject == ""){
    e.preventDefault()
    $("#subject_errors").show()
  }
  if(message == ""){
    e.preventDefault()
    $("#message_errors").show()
  }
});
</script>


<script type="text/javascript">
$('#email_draft').on(click, function() {
  var data = {some:$(input[name=data]).val()}
  $.ajax({
    url:'email_draft/',
      data: data,
      type: 'POST',
      success: function() {
          alert('success')
      }
    })
});
</script>


